其實體驗營已經結束一陣子了 最近才有空回來補齊每日作業，這邊寫的感覺都算是很基礎的東西，就給像我一樣的純新手看看，有興趣想報名六角的體驗營可以參考(對新手來說 作業量確實不少 以下僅記錄比較不熟的部分)，有高手願意指教的話非常感謝~不然其實也不知道自己寫的到底對不對(能夠優化程式碼更好~滿喜歡clean code的想法)

css 權重

<p class="green yellow orange">
我是P段落，文字顏色是什麼呢? 
</p>

/* CSS 程式碼 */

.orange {
    color: orange;
}

.blue {
    color: blue;
}

.red {
    color: red;
}

.yellow {
    color: yellow;
}

.green {
    color: green;
}

//green 依照css後者蓋前者 不看class的順序

處理圖片下方的空隙

//可參考https://tzuhui.io/2020/01/08/HTML/html-img-blank/
//HTML：

<img class="img" src="https://ithelp.ithome.com.tw/storage/image/logo.svg" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo nostrum officiis aspernatur.</p>

//CSS：
img { 
  vertical-align: top/bottom/text-top/text-bottom;
}

or

img { 
  display: block;
}

or 

.parentOfImg {
  font-size: 0px;
}

圖片放大效果 hover:{transform: scale(1.2)}

hover:{transform: scale(1.2)} 可製造圖片放大1.2倍的效果

box-sizing height、width計算

<div class="box1">
  <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia praesentium beatae velit?</p>
</div>

<div class="box2">
  <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia praesentium beatae velit?</p>
</div>

.text {
  font-size: 16px;
  line-height: 24px;
}

.box1 {
  margin-bottom: 30px;
  width: 300px;
  padding: 16px;
  border: 3px solid #000000;
}

.box2 {
  box-sizing: border-box;
  width: 300px;
  padding: 16px;
  margin-bottom: 30px;
  border: 3px solid #000000;
}

Q : 計算 .box1 與 .box2 的寬高
box1 :
width == 300原寬+16x2(左右padding)+3x2(左右border) = 338

height == 16x3+16x2+24x2+3x2 = 134 //錯的 line-height已經包含font-size
24x3(line-heightx3)+16x2(上下padding)+3x2(上下border)=110

box2 :
width == 300
height == 163+162 = 80 ? //錯的 因未設定高度結果同上為110，若有設定高度則不計padding與border的值

填滿整個區塊 height: auto ;

側邊陰影定位 position: sticky;

超出區塊的 logo 會被覆蓋，可以左右滾動呈現（運用 overflow）
兩側為由外到內黑色漸層陰影，定位在區塊左右邊界（可以使用偽元素 ::before、::after 搭配 position 定位）

https://codepen.io/ujlylmbv-the-lessful/pen/OJawEwq?editors=0100

下拉選單

點選下拉按鈕時會出現下拉選單，選單有 box-shadow 陰影效果，
並與按鈕右邊界貼齊（可以使用 position 定位）
下拉選單內選項有 hover 效果
點選選項時，選單收合，文字調整為點選選項時文字
運用 jQuery 或是 JavaScript 製作

https://codepen.io/ujlylmbv-the-lessful/pen/YzRjvRj?editors=0110

區塊摺疊

點選時 icon ＋／－ 切換
點選時展開／收合 content 區塊
點選時只會開啟該列 QA 區塊
呈現 hover、active 效果
運用 jQuery 或是 JavaScript 製作

https://codepen.io/ujlylmbv-the-lessful/pen/OJaaxgx?editors=0110

輪播套件 swiper

移除滾動條與左右箭頭
一次可以看到三個 swiper-slide（提示：slidesPerView）
底部分頁按鈕可以點選切換（提示：pagination clickable）
一頁切換三個 swiper-slide（提示：slidesPerGroup）
swiper-slide 左右間距為 24px（提示：spaceBetween）

https://codepen.io/ujlylmbv-the-lessful/pen/yLQQzoQ?editors=1010

Swiper RWD

運用 breakpoints，嘗試讓 swiper 隨著斷點變換排版：

在手機版時呈現單欄排版
在 576px 以上時呈現雙欄排版
在 768px 以上時呈現三欄排版
swiper 斷點設定為 mobile first

運用開發人員工具，觀看分頁按鈕 class 樣式，調整 CSS 樣式：

將分頁按鈕調整至距離卡片文字底部 24px
一般分頁按鈕背景顏色調整為 #525252、透明度（opacity） 1
點選分頁按鈕時，按鈕樣式變為：寬高 12px、背景顏色 #ffffff

https://codepen.io/ujlylmbv-the-lessful/pen/rNQbRRb

串接API + axios (filter)

第一題 串接臺南市國小各校人數統計
API 資料：https://data.tainan.gov.tw/dataset/pimary-number-people/resource/3b3e2b37-cbce-49ba-aba6-7f3d5fa8bec9

使用 axios 套件做資料串接，並 console.log() 拿到 data 內的資料。

第二題 承上題
臺南市總共有幾個國小？
大甲國小有多少學生？

console.log(response)後可發現response.data.data為所求資料

axios
  .get(
    "https://soa.tainan.gov.tw/Api/Service/Get/b1054400-86a4-40fa-aea0-fb39fce361e2"
  )

  .then((response) => {
    const data = response.data.data;
    console.log(data.length);


    const schoolFilter = data.filter((item) => item.school.trim() === "大甲");
    console.log(schoolFilter[0].num);
  })

  .catch((error) => console.log(error));